<template>
	<view class="">
		<view class="acea-row row-middle row-between news-data">
			<image src="@/static/images/index/news_icon.png" mode=""></image>
			<view class="news-list">
				<swiper class="news-swiper" :indicator-dots="false" :autoplay="true" :vertical="true" :interval="3000" :duration="1000">
					<swiper-item class="news-swiper-item" v-for="item in aericleList" >
						<view class="swiper-item">
							<view class="acea-row row-middle row-between news-item" v-for="child in item">
								<view class="news-cont line1">{{ child.title }}</view>
								<view class="news-time"></view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getArticleHotList
	} from "@/api/api.js";
	export default {
		props: {

		},

		data() {
			return {
				aericleList: []
			}
		},
		mounted() {
			this.getArticleHot()
		},

		methods: {
			async getArticleHot() {
				try {
					let res = await getArticleHotList();
					let { list } =  res.data || [];
					for(let i=0;i<=list.length;){
						this.aericleList.push(list.slice(i,i+=2))
					}
				} catch (e) {
					//TODO handle the exception
				}
			}
		}

	}
</script>

<style lang="scss">
	.news-data {
		border-top: 1px solid rgba(247, 247, 247, 1);

		image {
			width: 84rpx;
			height: 84rpx;
		}

		.news-list {
			width: calc(100% - 126rpx);
			height: 84rpx;

			.news-swiper,
			.news-swiper-item,
			.swiper-item {
				height: 100%;
			}

			.news-item {
				padding-left: 16rpx;
				position: relative;

				&::after {
					display: block;
					content: '';
					position: absolute;
					width: 4rpx;
					height: 4rpx;
					background: #000000;
					border-radius: 50%;
					top: 50%;
					transform: translateY(-4rpx);
					left: 0;
				}

				.news-cont {
					width: 80%;
					font-size: 28rpx;
					color: rgba(56, 56, 56, 1);
				}

				.news-time {
					font-size: 22rpx;
					color: rgba(166, 166, 166, 1);
				}
			}

			.news-item~.news-item {
				margin-top: 10rpx;
			}
		}
	}
</style>